<template>
  <div id="backups">
    <ReturnPage />
    <div class="tp_box mt20">
      <!-- 查询表单 -->
      <el-form
        size="mini"
        :inline="true"
        :model="query"
        class="demo-form-inline"
        ref="query"
      >
        <el-form-item label="配置文件名称:">
          <el-input
            v-model="query.configName"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="主机名称:"
                              prop="">
                    <el-input v-model="query.hostName"
                              placeholder="请输入主机名称"></el-input>
                </el-form-item> -->
        <el-form-item>
          <el-button type="primary" class="ml10" @click="getList()"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="warning" class="ml10" @click="reset('query')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="showAdd">新增</el-button>

      <!-- 备份记录列表 -->
      <el-table
        class="mt20"
        height="calc(100vh - 330px)"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="configName" label="配置文件名称">
        </el-table-column>
        <el-table-column prop="configDir" label="配置文件目录">
        </el-table-column>
        <el-table-column prop="hostName" label="主机名称"> </el-table-column>
        <el-table-column prop="hostIp" label="主机ip"> </el-table-column>
        <el-table-column prop="backupMode" label="备份方式" align="center">
          <template slot-scope="{ row: { backupMode } }">
            <el-tag type="danger" v-if="+backupMode == 1">手动</el-tag>
            <el-tag type="sunness" v-else-if="+backupMode == 2">自动</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="备份状态" align="center">
          <template slot-scope="{ row: { status } }">
            <el-tag type="danger" v-if="+status == 1">已备份</el-tag>
            <el-tag type="success" v-else>未备份</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="backupTime"
                                 label="备份时间"
                                 width="180"
                                 show-overflow-tooltip="true">
                </el-table-column> -->
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button size="small" @click="showOneConfigList(scope.row.id)"
              >备份历史</el-button
            >
            <el-button type="primary" size="small" @click="showEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="getDelConfigbackup(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData.length > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 新增备份弹框 -->
    <el-dialog
      :title="'新增 ：' + $route.query.hostip"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="mini"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="配置文件名称" prop="configName">
          <el-input
            v-model="ruleForm.configName"
            placeholder="请输入配置文件名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="配置文件目录" prop="configDir">
          <el-input
            v-model="ruleForm.configDir"
            placeholder="请输入配置文件目录"
          ></el-input>
        </el-form-item>
        <el-form-item label="备份方式" prop="backupMode">
          <el-select
            v-model="ruleForm.backupMode"
            placeholder="请选择备份方式"
            style="width: 100%"
          >
            <el-option label="手动" value="1"></el-option>
            <el-option label="自动" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备份周期"
          prop="backupPeriod"
          v-if="ruleForm.backupMode == 2"
        >
          <el-select
            v-model="ruleForm.backupPeriod"
            placeholder="请选择备份周期"
            style="width: 100%"
            :disabled="ruleForm.backupMode == 1"
          >
            <el-option label="每天" value="1"></el-option>
            <el-option label="每周" value="2"></el-option>
            <el-option label="每月" value="3"></el-option>
            <!-- <el-option label="每半年"
                                   value=4></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item
          label="备份时间"
          v-if="ruleForm.backupMode == 2"
          prop="backupTime"
        >
          <el-date-picker
            :disabled="ruleForm.backupMode == 1"
            v-model="ruleForm.backupTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="保留时长（天）"
                              prop="retainDays">
                    <el-input v-model="ruleForm.retainDays"
                              placeholder="请输入保留天数"></el-input>
                </el-form-item> -->
        <!-- <el-form-item label="主机用户名" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="主机密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item> -->
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAddConfigbackup('ruleForm')"
            >确定</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog
      :title="'编辑 ：' + $route.query.hostip"
      :visible.sync="editdialogVisible"
      width="30%"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        size="mini"
        ref="editForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="配置文件名称" prop="configName">
          <el-input
            v-model="editForm.configName"
            placeholder="请输入配置文件名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="配置文件目录" prop="configDir">
          <el-input
            v-model="editForm.configDir"
            placeholder="请输入配置文件目录"
          ></el-input>
        </el-form-item>

        <el-form-item label="备份方式" prop="backupMode">
          <el-select
            v-model="editForm.backupMode"
            placeholder="请选择备份方式"
            style="width: 100%"
          >
            <el-option label="手动" :value="1"></el-option>
            <el-option label="自动" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="备份周期"
          prop="backupPeriod"
          v-if="editForm.backupMode == 2"
        >
          <el-select
            v-model="editForm.backupPeriod"
            placeholder="请选择备份周期"
            style="width: 100%"
            :disabled="editForm.backupMode == 1"
          >
            <el-option label="每天" :value="1"></el-option>
            <el-option label="每周" :value="2"></el-option>
            <el-option label="每月" :value="3"></el-option>
            <!-- <el-option label="每半年"
                                   :value=4></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item
          label="备份时间"
          v-if="editForm.backupMode == 2"
          prop="backupTime"
        >
          <el-date-picker
            :disabled="editForm.backupMode == 1"
            v-model="editForm.backupTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="保留时长（天）"
                              prop="retainDays">
                    <el-input v-model="editForm.retainDays"
                              placeholder="请输入保留天数"></el-input>
                </el-form-item> -->
        <!-- <el-form-item label="主机用户名"
                              prop="username">
                    <el-input v-model="editForm.username"
                              placeholder="请输入主机用户名"></el-input>
                </el-form-item>
                <el-form-item label="主机密码"
                              prop="password">
                    <el-input v-model="editForm.password"
                              placeholder="请输入主机密码"></el-input>
                </el-form-item> -->
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="editForm.description"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getEditConfigbackup('editForm')"
            >确定</el-button
          >
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 配置更新列表 -->
    <el-dialog
      title="配置更新列表"
      :visible.sync="OneConfigListvisible"
      width="50%"
    >
      <el-table
        :data="OneConfigList"
        style="width: 100%"
        height="calc(100vh - 380px)"
      >
        <el-table-column prop="configName" label="配置文件名称" width="180">
        </el-table-column>
        <el-table-column prop="hostIp" label="主机IP" width="180">
        </el-table-column>
        <el-table-column prop="backupTime" label="备份时间"> </el-table-column>
        <el-table-column prop="version" label="版本"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="update(scope.row.id)">
              更新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="OneConfigList.length > 0"
        :total="OneConfigListTotal"
        :page.sync="OneConfigListQuery.pageNum"
        :limit.sync="OneConfigListQuery.pageSize"
        @pagination="getConfigbackupList()"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getConfigbackupListApi,
  getAddConfigbackupApi,
  getEditConfigbackupApi,
  getDelConfigbackupApi,
  getRemoteHostListApi,
  getOneConfigListApi,
  getChangeConfigApi,
  getConfigbackupApi,
} from "@/api/automated/instrumentPanel";
export default {
  data() {
    return {
      OneConfigListvisible: false,
      OneConfigList: [],
      //查询条件
      search: {
        host: "",
        name: "",
        status: "",
      },
      //分页
      query: {
        hostId: "",
        pageNum: 1,
        pageSize: 10,
        configName: "",
        hostName: "",
      },
      total: "",
      //新增表单
      ruleForm: {
        username: "",
        password: "",
        configName: "",
        configDir: "",
        hostIp: "",
        hostId: "",
        hostName: "",
        backupMode: "",
        backupPeriod: "",
        backupTime: "",
        description: "",
        retainDays: "",
      },
      //修改表单
      editForm: {},
      rules: {
        configName: [
          { required: true, message: "请输入配置文件名称", trigger: "blur" },
        ],
        configDir: [
          { required: true, message: "请输入配置文件目录", trigger: "blur" },
        ],
        username: [
          { required: false, message: "请输入主机用户名", trigger: "blur" },
        ],
        password: [
          { required: false, message: "请输入主机密码", trigger: "blur" },
        ],
        hostId: [{ required: true, message: "请选择主机", trigger: "change" }],
        backupMode: [
          { required: true, message: "请选择备份方式", trigger: "change" },
        ],
        backupPeriod: [
          { required: true, message: "请选择备份周期", trigger: "change" },
        ],
        backupTime: [
          { required: true, message: "请选择备份时间", trigger: "change" },
        ],
        retainDays: [
          { required: true, message: "请输入保留天数", trigger: "blur" },
        ],
      },
      //列表数据
      tableData: [],
      editdialogVisible: false,
      dialogVisible: false, //控制配置备份弹框
      //备份历史分页
      OneConfigListQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      OneConfigListTotal: "",
      OneConfigId: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    reset(formName) {
      (this.query.configName = ""), (this.query.hostName = ""), this.getList();
    },

    //获取列表数据
    async getList() {
      this.query.hostId = this.$route.query.hostid;
      let res = await getConfigbackupListApi(this.query);
      let { code, rows } = res;
      if (code == 200) {
        this.tableData = rows;
        this.total = res.total;
      }
    },
    //展示新增
    showAdd() {
      this.dialogVisible = true;
      this.ruleForm = {
        username: "",
        password: "",
        configName: "",
        configDir: "",
        hostIp: "",
        hostId: "",
        hostName: "",
        backupMode: null,
        backupPeriod: null,
        backupTime: "",
        description: "",
        retainDays: "",
      };
    },
    //确定新增
    getAddConfigbackup(formName) {
      this.ruleForm.hostId = this.$route.query.hostid;
      this.ruleForm.hostName = this.$route.query.host;
      this.ruleForm.hostIp = this.$route.query.hostip;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddConfigbackupApi(this.ruleForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogVisible = false;
            this.getList();
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //展示修改
    showEdit(row) {
      this.editForm = { ...row };
      this.editForm.hostId = Number(row.hostId);
      this.editdialogVisible = true;
    },
    //确认修改
    getEditConfigbackup(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditConfigbackupApi(this.editForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.editdialogVisible = false;
            this.getList();
          } else {
            this.$message.error(msg);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    getDelConfigbackup(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await getDelConfigbackupApi(id);
        let { code, msg } = res;
        if (code == 200) {
          this.$message.success(msg);
          this.getList();
        } else {
          this.$message.error(msg);
        }
      });
    },
    //显示配置更新列表
    async showOneConfigList(id) {
      this.OneConfigId = id;
      this.getConfigbackupList();
    },
    //获取数据
    async getConfigbackupList() {
      let res = await getConfigbackupApi(
        this.OneConfigId,
        this.OneConfigListQuery
      );
      let { code, rows, total } = res;
      if (code == 200) {
        this.OneConfigList = rows;
        this.OneConfigListvisible = true;
        this.OneConfigListTotal = total;
      }
    },
    async update(id) {
      let res = await getChangeConfigApi(id);
      let { code, msg } = res;
      if (code == 200) {
        this.$message.success(msg);
        this.getList();
        // this.OneConfigListvisible = false
      } else {
        this.$message.error(msg);
      }
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>